<template>
  <div class="app-container">
    <div class="app-container-inner" v-loading="loading" element-loading-text="加载中...">
      <div class="set-card">
        <div class="btns flex-justify-end">
          <HPlainButton @click="saveSet(formRef)">保存</HPlainButton>
        </div>
        <div class="form">
          <el-form ref="formRef" :model="form">
            <el-form-item label="审核返厂申请" class="form-item">
              <div>
                <el-radio-group v-model="form.autoCheckRepairApply">
                  <el-radio :value="true">
                    <span class="bg_text">自动审核</span>
                  </el-radio>
                  <el-radio :value="false">
                    <span class="bg_text">人工审核</span>
                  </el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table-list">
        <el-table border stripe resizable>
          <el-table-column
            show-overflow-tooltip
            type="index"
            :index="indexMethod"
            label="序号"
            width="50"
          />
          <el-table-column show-overflow-tooltip prop="name" label="状态名称" width="150" />
          <el-table-column show-overflow-tooltip prop="name" label="状态处理" />
          <el-table-column prop="date" label="最后更新时间" width="170" />
          <el-table-column fixed="right" label="操作" width="60">
            <template #default="scope">
              <div class="btns">
                <button class="btn-table bgColor2" @click="onShowSystemUpgrade">详细</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-card">
        <div class="btns">
          <HPlainButton @click="onShowSystemUpgrade">添加地址库</HPlainButton>
        </div>
        <div class="table-list">
          <el-table border stripe resizable>
            <el-table-column
              show-overflow-tooltip
              type="index"
              :index="indexMethod1"
              label="序号"
              width="50"
            />
            <el-table-column show-overflow-tooltip prop="name" label="地址库名称" width="200" />
            <el-table-column show-overflow-tooltip prop="name" label="姓名" width="150" />
            <el-table-column show-overflow-tooltip prop="name" label="手机号" width="150" />
            <el-table-column show-overflow-tooltip prop="name" label="详细地址" />
            <el-table-column prop="date" label="最后更新时间" width="170" />
            <el-table-column fixed="right" label="操作" width="60">
              <template #default="scope">
                <div class="btns">
                  <button class="btn-table bgColor2" @click="onShowSystemUpgrade">详细</button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="table-card">
        <div class="btns">
          <HPlainButton @click="onShowSystemUpgrade">添加返厂类型</HPlainButton>
        </div>
        <div class="table-list">
          <el-table border stripe resizable>
            <el-table-column
              show-overflow-tooltip
              type="index"
              :index="indexMethod2"
              label="序号"
              width="50"
            />
            <el-table-column show-overflow-tooltip prop="name" label="返厂类型" />
            <el-table-column prop="date" label="最后更新时间" width="170" />
            <el-table-column fixed="right" label="操作" width="60">
              <template #default="scope">
                <div class="btns">
                  <button class="btn-table bgColor2" @click="onShowSystemUpgrade">详细</button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, markRaw } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Warning } from '@element-plus/icons-vue'
  import type { FormInstance } from 'element-plus'
  import { getRepairSet, saveRepairSet } from '../../../../../api/basic'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.returnFactorySet,
  })

  /**
   * 显示升级维护消息方法
   */
  const onShowSystemUpgrade = () => {
    ElMessage({
      type: 'success',
      message: '正在升级维护中，敬请期待',
    })
  }

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }
  //列表序号
  const indexMethod1 = (index: number) => {
    return (index + 1) * 1
  }
  //列表序号
  const indexMethod2 = (index: number) => {
    return (index + 1) * 1
  }

  const loading = ref(true)
  const props = defineProps({
    active_name: String,
  })

  const form = reactive({
    autoCheckRepairApply: false,
    id: 0,
    repairAddrStoreId: 0,
  })

  // 表单元素
  const formRef = ref<FormInstance>()

  onMounted(() => {
    getSet()
  })

  // 获取返厂设置
  const getSet = async () => {
    loading.value = true
    await getRepairSet().then((res) => {
      form.autoCheckRepairApply = res.data.data.row.autoCheckRepairApply
      form.repairAddrStoreId = res.data.data.row.repairAddrStoreId
      form.id = res.data.data.row.id
    })
    loading.value = false
  }

  // 保存的方法
  const saveMethod = async (data, method) => {
    ElMessageBox({
      type: 'warning',
      icon: markRaw(Warning),
      title: '提示',
      message: '确认保存设置?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(() => {
      method(data).then((res) => {
        if (res.data.success == true) {
          ElMessage({
            message: res.data.message,
            type: 'success',
            duration: 2000,
          })
          getSet()
        } else {
          if (res.data.isError)
            ElMessage({
              message: res.data.message,
              type: 'warning',
              duration: 2000,
            })
          return
        }
      })
    })
  }

  // 保存设置
  const saveSet = (formEl: FormInstance | undefined) => {
    formEl.validate((valid) => {
      if (valid) {
        saveMethod(form, saveRepairSet)
      }
    })
  }

  defineExpose({ getSet })
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
